<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<style type="text/css">
body {
	background-image: url(images/overwater03.jpeg);
	background-size: 100%;
}

#formTab {
	width: 400px;
	height: 460px;
	border: 1px solid gray;
	border-radius: 30px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin:-230px 0 0 -200px;
	box-shadow: 0 0 15px 5px #ffffff;
	padding-top: 25px;
	text-align: center;
	color: #ffffff;
}
#formTab input {
	background: transparent;
	color: #ffffff;
	border: none;
	border-bottom: 1px solid #ffffff;
	outline: none;
	transition: background-color 0s linear 3600s;
}
#formTab input:-webkit-autofill {
  /*自动填入文本颜色*/
  -webkit-text-fill-color: #ffffff !important;
  /*自动填入光标颜色*/
  caret-color: white;
  /*背景透明；原理：动画由透明变有背景色；参数：背景色属性、动画时间、动画速度曲线、延迟时间*/
  transition: background-color 0s linear 3600s;
}
#spdiv {
	height: 35px;
	color: red;
	font-size: 15px;
	line-height: 35px;
}
#infodiv {
	height: 30px;
	margin-top: 50px;
}
a {
	color: #ffffff;
}
#cimg {
	cursor: pointer;
}
#loginBtn {
	width: 80px;
	height: 30px;
	line-height: 30px;
	border: 1px solid #ffffff;
	border-radius: 10px;
	cursor: pointer;
	position: absolute;
	left: 50%;
	margin: 5px 0 0 -40px;
}
#loginBtn:hover {
	background-color: #ffffff;
	color: #000000;
}
</style>
</head>
<body>
	<div id="formTab">
			<div>
				<h3>登录</h3>
			</div>
			<div>
				账号:<input type="text" name="username" id="username" value="${un.value }">
			</div>
			<div id="spdiv">
				<span id="sp1"></span>
			</div>
			<div>
				密码:<input type="password" name="password" id="password" value="${up.value }">
			</div>
			
			<div id="spdiv">
				<span id="sp2"></span>
			</div>
			<div>
				验证码:<input type="text" name="checkCode" id="checkCode">
			</div>
			<div id="spdiv">
				<span id="sp3"></span>
			</div>
			<div style="margin-top: 5px;">
				<img alt="验证码" id="cimg" src="<%=response.encodeURL("code.do") %>" onclick="changCode();">
				<br>
				<a href="javascript:;" onclick="changCode();">看不清，点击刷新</a>
			</div>
			
			<div>
				<input type="radio" value="1" name="isReDe">
				自动识别账号和密码
			</div>
			<div>
				<input type="radio" value="2" name="isReDe">
				清除账号和密码
			</div>
			<div id="footBtn">
				<!-- <input type="button" value="登录" id="loginBtn"> -->
				<div id="loginBtn">登录</div>
			</div>
			<div id="infodiv">
				<a href="regist.jsp" style="color: red;">没有账号？去注册</a>
			</div>
	</div>
	
</body>
<script type="text/javascript">
function changCode() {
	<%
	String url = "code.do";
	%>
	cimg.src = "<%=response.encodeURL(url)%>?t="+new Date().getTime();
}
function login() {
	// 1 客户端验证
	var un = username.value;
	var up = password.value;
	var uc = checkCode.value;
	if(checkUserName() && checkPassword() && checkCCode()){
		// 2 发送异步请求
		var xhr = new XMLHttpRequest();
		xhr.onreadystatechange = function () {
			if(xhr.readyState == 4){
				if(xhr.status == 200){
					var result = xhr.responseText;
					//console.log(result);
					if(result == "f"){
						sp1.innerHTML = "账号或密码错误";
						sp2.innerHTMML = "账号或密码错误";
					}else if(result == "s"){
						window.location.href = "main.jsp";
					}else if(result == "ce"){
						sp3.innerHTML = "验证码错误";
					}else if(result == "se"){
						window.location.href = "error.jsp";
					}else{
						window.location.href = "error.jsp";
					}
				}
			}
		}
		xhr.open("POST","login.do",true);
		xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
		var radEles = document.getElementsByName("isReDe");
		var uisReDe = "";
		// 判断是否勾选了radio单选框
		for(var i=0;i<radEles.length;i++){
			if(radEles[i].checked){
				uisReDe = radEles[i].value;
			}
		}
		console.log(uisReDe);
		var rparam = "";
		if(uisReDe == ""){
			rparam = "username="+un+"&password="+up+"&checkCode="+uc;
		}else{
			rparam = "username="+un+"&password="+up+"&checkCode="+uc+"&isReDe="+uisReDe;
		}
		xhr.send(rparam);
		// 3 处理结果
	}
	
}
loginBtn.onclick = login;
// 检查账号
function checkUserName() {
	var un = username.value;
	if(un == ""){
		sp1.innerHTML = "账号不能为空";
		return false;
	}
	return true;
}
// 检查密码
function checkPassword() {
	var up = password.value;
	if(up == ""){
		sp2.innerHTML = "密码不能为空";
		return false;
	}
	return true;
}
// 检查验证码
function checkCCode() {
	var uc = checkCode.value;
	if(uc == ""){
		sp3.innerHTML = "验证码不能为空";
		return false;
	}
	return true;
}
username.onblur = checkUserName;
password.onblur = checkPassword;
checkCode.onblur = checkCCode;
</script>
</html>